{% extends "base.html" %}

{% block head %}
    <script>
        // Enable tooltips everywhere
        $(function () {
            $('[data-toggle="tooltip"]').tooltip()
        })
    </script>
{% endblock %}

{% block title %}Settings{% endblock %}

{% block body %}
    {# 检查是否登录 #}
    {% if user_info %}
        <div class="row">
            <!-- Frequently Asked Questions -->
            <div class="col-4 order-md-2 mb-4">
                <h4 class="d-flex justify-content-between align-items-center mb-3">
                    <span class="text-muted text-center" style="width: 100%;">Frequently Asked Questions</span>
                </h4>
                <ul class="list-group mb-3">
                    <li class="list-group-item d-flex justify-content-between lh-condensed">
                        <div>
                            <h6 class="my-0">About user ID</h6>
                            <small class="text-muted">It's the unique ID number that identify you.</small>
                        </div>
                        <span class="text-muted">
                        <i class="material-icons">confirmation_number</i>
                    </span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between lh-condensed">
                        <div>
                            <h6 class="my-0">What's username?</h6>
                            <small class="text-muted">You must use username to login.</small>
                        </div>
                        <span class="text-muted">
                        <i class="material-icons">person</i>
                    </span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between lh-condensed">
                        <div>
                            <h6 class="my-0">Forgot password?</h6>
                            <small class="text-muted">You should use the mail to recover your password.</small>
                        </div>
                        <span class="text-muted">
                        <i class="material-icons">lock_open</i>
                    </span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between lh-condensed">
                        <div>
                            <h6 class="my-0">Available status</h6>
                            <small class="text-muted">You can't use the account if it was set to false.</small>
                        </div>
                        <span class="text-muted">
                        <i class="material-icons">check</i>
                    </span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between">
                        <span>Further questions</span>
                        <strong>
                            <i class="material-icons">question_answer</i>
                        </strong>
                    </li>
                </ul>

                <form class="card p-2">
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="Any problem about the site?">
                        <div class="input-group-append">
                            <button type="submit" class="btn btn-secondary">Feedback</button>
                        </div>
                    </div>
                </form>
            </div>


            <!-- Main Card -->
            <div class="card col-8">
                <!-- Middle Header -->
                <div class="card-body row">
                    <div class="col-1">
                        <i class="material-icons" style="font-size: 50px; vertical-align: -20%;">person</i>
                    </div>
                    <div class="col-11">
                        <span class="h4">User Settings</span><br>
                        <span class="text-muted">Account & Password</span>
                    </div>
                </div>

                <!-- List Start -->
                <div id="accordion">
                    <!-- User ID -->
                    <div class="card">
                        <div class="card-header bg-transparent">
                            <div class="row">
                                <div class="col-3 btn bg-transparent text-left text-uppercase"><b>User ID</b></div>
                                <div class="col-7 btn bg-transparent text-left">{{ user_info.id }}</div>
                                <button id="edit-id" type="button" class="btn btn-link collapsed col-2 text-muted"
                                        data-toggle="tooltip" data-placement="top"
                                        title="You can't change the user ID.">
                                    Edit
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- User Name -->
                    <div class="card">
                        <div class="card-header bg-transparent" id="headingOne">
                            <div class="row">
                                <div class="col-3 btn bg-transparent text-left text-uppercase"><b>Username</b></div>
                                <div class="col-7 btn bg-transparent text-left">{{ user_info.name }}</div>
                                <button class="btn btn-link collapsed col-2" data-toggle="collapse"
                                        data-target="#collapseOne"
                                        aria-expanded="false" aria-controls="collapseOne">
                                    Edit
                                </button>
                            </div>
                        </div>
                        <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordion">
                            <div class="card-body row">
                                <div class="col-2"></div>
                                <div class="col-8">
                                    <div class="mb-3">
                                        <form method="post">
                                            {% csrf_token %}
                                            <input type="hidden" name="field" value="name">
                                            <label for="username">Enter New Username</label>
                                            <div class="input-group">
                                                <div class="input-group-prepend">
                                            <span class="input-group-text">
                                                <i class="material-icons">person</i>
                                            </span>
                                                </div>
                                                <input type="text" class="form-control" id="username" placeholder="Username"
                                                       name="name" value="{{ user_info.name }}" required>
                                                <div class="invalid-feedback" style="width: 100%;">
                                                    Your username is required.
                                                </div>
                                            </div>
                                            <hr class="mb-3">
                                            <button class="btn btn-outline-primary" type="submit">Save</button>
                                            <button class="btn collapsed" data-toggle="collapse" type="button"
                                                    data-target="#collapseOne"
                                                    aria-expanded="false" aria-controls="collapseOne">
                                                Cancel
                                            </button>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Password -->
                    <div class="card">
                        <div class="card-header bg-transparent" id="headingPwd">
                            <div class="row">
                                <div class="col-3 btn bg-transparent text-left text-uppercase"><b>Password</b></div>
                                <div class="col-7 btn bg-transparent text-left text-muted">You can modify your password now.</div>
                                <button class="btn btn-link collapsed col-2" data-toggle="collapse"
                                        data-target="#collapsePwd"
                                        aria-expanded="false" aria-controls="collapsePwd">
                                    Edit
                                </button>
                            </div>
                        </div>
                        <div id="collapsePwd" class="collapse" aria-labelledby="headingPwd" data-parent="#accordion">
                            <div class="card-body row">
                                <div class="col-2"></div>
                                <div class="col-8">
                                    <div class="mb-3">
                                        <form method="post">
                                            {% csrf_token %}
                                            <input type="hidden" name="field" value="password">
                                            <div class="form-group">
                                                <label for="origin-password">Enter Origin Password</label>
                                                <div class="input-group">
                                                    <div class="input-group-prepend">
                                                        <span class="input-group-text"><i class="material-icons">lock_open</i></span>
                                                    </div>
                                                    <input id="origin-password" type="text" class="form-control" placeholder="Origin Password" required>
                                                    <input id="origin-password-encrypted" type="hidden" name="origin_pwd">
                                                    <div class="invalid-feedback" style="width: 100%;">Your origin password is required.</div>
                                                </div>
                                            </div>

                                            <div class="form-group">
                                                <label for="username">Enter New Password</label>
                                                <div class="input-group">
                                                    <div class="input-group-prepend">
                                                        <span class="input-group-text"><i class="material-icons">lock</i></span>
                                                    </div>
                                                    <input id="new-password" type="text" class="form-control" placeholder="New Password" required>
                                                    <input id="new-password-encrypted" type="hidden" name="new_pwd">
                                                    <div class="invalid-feedback" style="width: 100%;">Your new password is required.</div>
                                                </div>
                                            </div>
                                            <hr class="mb-3">
                                            <button id="btn-pwd" class="btn btn-outline-primary" type="submit">Save</button>
                                            <button class="btn collapsed" data-toggle="collapse" type="button"
                                                    data-target="#collapsePwd"
                                                    aria-expanded="false" aria-controls="collapsePwd">
                                                Cancel
                                            </button>
                                            <script>
                                                $("#btn-pwd").click(function () {
                                                    $("#origin-password-encrypted").attr("value", $.md5($("#origin-password").val()));
                                                    $("#new-password-encrypted").attr("value", $.md5($("#new-password").val()));
                                                })
                                            </script>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Nick Name -->
                    <div class="card">
                        <div class="card-header bg-transparent" id="headingTwo">
                            <div class="row">
                                <div class="col-3 btn bg-transparent text-left text-uppercase"><b>Nickname</b></div>
                                <div class="col-7 btn bg-transparent text-left">{{ user_info.nickname|slice:":27" }}</div>
                                <button class="btn btn-link collapsed col-2" data-toggle="collapse"
                                        data-target="#collapseTwo"
                                        aria-expanded="false" aria-controls="collapseTwo">
                                    Edit
                                </button>
                            </div>
                        </div>
                        <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
                            <div class="card-body row">
                                <div class="col-2"></div>
                                <div class="col-8">
                                    <div class="mb-3">
                                        <form method="post">
                                            {% csrf_token %}
                                            <input type="hidden" name="field" value="nickname">
                                            <label for="username">Enter New Nickname</label>
                                            <div class="input-group">
                                                <div class="input-group-prepend">
                                            <span class="input-group-text">
                                                <i class="material-icons">tag_faces</i>
                                            </span>
                                                </div>
                                                <input type="text" class="form-control" id="nickname" placeholder="Nickname"
                                                       name="nickname" value="{{ user_info.nickname }}" required>
                                                <div class="invalid-feedback" style="width: 100%;">
                                                    Your nickname is required.
                                                </div>
                                            </div>
                                            <hr class="mb-3">
                                            <button class="btn btn-outline-primary" type="submit">Save</button>
                                            <button class="btn collapsed" data-toggle="collapse" type="button"
                                                    data-target="#collapseTwo"
                                                    aria-expanded="false" aria-controls="collapseTwo">
                                                Cancel
                                            </button>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Mail -->
                    <div class="card">
                        <div class="card-header bg-transparent" id="headingThree">
                            <div class="row">
                                <div class="col-3 btn bg-transparent text-left text-uppercase"><b>Mail</b></div>
                                <div class="col-7 btn bg-transparent text-left">{{ user_info.mail }}</div>
                                <button class="btn btn-link collapsed col-2" data-toggle="collapse"
                                        data-target="#collapseThree"
                                        aria-expanded="false" aria-controls="collapseThree">
                                    Edit
                                </button>
                            </div>
                        </div>
                        <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
                            <div class="card-body row">
                                <div class="col-2"></div>
                                <div class="col-8">
                                    <div class="mb-3">
                                        <form method="post">
                                            {% csrf_token %}
                                            <input type="hidden" name="field" value="mail">
                                            <label for="mail">Enter New Mail Address</label>
                                            <div class="input-group">
                                                <div class="input-group-prepend">
                                            <span class="input-group-text">
                                                <i class="material-icons">contact_mail</i>
                                            </span>
                                                </div>
                                                <input type="email" class="form-control" id="mail" placeholder="Mail" name="mail" value="{{ user_info.mail }}" required>
                                                <div class="invalid-feedback" style="width: 100%;">Your mail is required.</div>
                                            </div>
                                            <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
                                            <hr class="mb-3">
                                            <button class="btn btn-outline-primary" type="submit">Save</button>
                                            <button class="btn collapsed" data-toggle="collapse" type="button"
                                                    data-target="#collapseThree" aria-expanded="false"
                                                    aria-controls="collapseThree">
                                                Cancel
                                            </button>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- register_time -->
                    <div class="card">
                        <div class="card-header bg-transparent">
                            <div class="row">
                                <div class="col-3 btn bg-transparent text-left text-uppercase"><b>register time</b></div>
                                <div class="col-7 btn bg-transparent text-left">{{ user_info.register_time }}</div>
                                <button id="edit-id" type="button" class="btn btn-link collapsed col-2 text-muted"
                                        data-toggle="tooltip" data-placement="top"
                                        title="You can't change the user ID.">
                                    View
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- last_login -->
                    <div class="card">
                        <div class="card-header bg-transparent">
                            <div class="row">
                                <div class="col-3 btn bg-transparent text-left text-uppercase"><b>last login</b></div>
                                <div class="col-7 btn bg-transparent text-left">{{ user_info.last_login }}</div>
                                <button id="edit-id" type="button" class="btn btn-link collapsed col-2 text-muted"
                                        data-toggle="tooltip" data-placement="top"
                                        title="You can't change the user ID.">
                                    View
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- available -->
                    <div class="card">
                        <div class="card-header bg-transparent">
                            <div class="row">
                                <div class="col-3 btn bg-transparent text-left text-uppercase"><b>available</b></div>
                                <div class="col-7 btn bg-transparent text-left">{{ user_info.available }}</div>
                                <button id="edit-id" type="button" class="btn btn-link collapsed col-2 text-muted"
                                        data-toggle="tooltip" data-placement="top"
                                        title="You can't change the user ID.">
                                    View
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

            </div> <!-- Main Card -->

        </div>
    {% else %}
        {% include "component/jump-to-sign-in.html" %}
    {% endif %}
{% endblock %}